<template>
  <view class="mui-empty" :style="{ 'background-color': bg }">
    <image v-if="type === 'empty'" :style="ImgSize" src="/static/mui/empty.svg" mode="aspectFit" />
    <image v-else-if="type === 'error'" :style="ImgSize" src="/static/mui/error.svg" mode="aspectFit" />
    <image v-else-if="type === 'search'" :style="ImgSize" src="/static/mui/search.svg" mode="aspectFit" />
    <image v-else-if="type === 'network'" :style="ImgSize" src="/static/mui/network.svg" mode="aspectFit" />
    <view class="text">
      {{ text }}
    </view>
    <view class="slot">
      <slot>
        <button v-if="type === 'network'" class="btn" size="mini" @click="refresh()">
          刷新试试
        </button>
      </slot>
    </view>
  </view>
</template>

<script>
export default {
  name: 'MuiEmpty',
  // #ifdef MP-WEIXIN
  options: { virtualHost: true },
  // #endif
  props: {
    // img：缺省图片,可选值 empty error network search，支持传入图片URL
    // imgSize：缺省图尺寸,
    // text：描述文字,
    // bg：背景色
    type: {
      type: String,
      default: 'empty',
      validator(val) {
        return ['empty', 'error', 'search', 'network'].includes(val)
      },
    },
    imgSize: {
      type: String,
      default: '320',
    },
    emptyText: {
      type: String,
      default: '暂无数据~',
    },
    errorText: {
      type: String,
      default: '出现错误啦',
    },
    searchText: {
      type: String,
      default: '暂无数据~',
    },
    networkText: {
      type: String,
      default: '网络走丢啦，请检查网络~',
    },
    bg: {
      type: String,
      default: '#fff',
    },
  },
  emits: ['refresh'],
  computed: {
    ImgSize() {
      return `width:${this.imgSize}rpx; height:${this.imgSize}rpx;`
    },
    text() {
      return { empty: this.emptyText, error: this.errorText, search: this.searchText, network: this.networkText }[this.type]
    },
  },
  methods: {
    refresh() {
      this.$emit('refresh', true)
    },
  },
}
</script>

<style lang="scss">
.mui-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 64rpx 0;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

.center {
  text-align: center;
}

.text {
  color: #969798;
  padding: 20rpx 0;
}

.slot {
  padding-top: 20rpx;
}

.btn {
  border: none;
  outline: none;
  background-color: #5555ff;
  color: #fff;
}
</style>
